<template>
	<van-popup
	  :show="show"
	  round
	  closeable
	  position="bottom"
	  custom-style="height: 40%"
	  close-icon="close"
	  @close="onClose"
	  class="pop"
	>
	<view class="views">
		
	</view>
	<van-field
	    :value="phone"
	    label="手机号"
	    placeholder="请输入手机号"
	    :border="false"
		class="phone"
		@blur="changePhone"
	  />
	<van-field
	    :value="sms"
	    center
	    clearable
		class=""
	    label="验证码"
	    placeholder="请输入验证码"
	    border="{{ false }}"
	    use-button-slot
		@change="changesms"
	  >
	    <van-button  :disabled="disabled" slot="button" size="small" type="primary"
		@click="sendCode"
		>
	      发送验证码
	    </van-button>
	  </van-field>
	  <view class="btns">
		<van-button :disabled="sqLogin" block type="primary" 
		class="btns"
		@click="YZYzmFn"
		>手机授权</van-button>
	  </view>
	</van-popup>
</template>

<script setup lang="ts">
import {ref , defineProps} from 'vue'
import { reg } from '../ulit/reg'
import { sentYzm , YZYzm , getToken} from '../api/api'
import {
		useDataStore
	} from '@/store/data.ts'
// pinia
const store = useDataStore();
const show = ref(false)
// 打开手机登录
const openPhoneLogin = () =>{
	show.value = true
}
const onClose = ()=>{
	show.value = false;
	phone.value = ''
	sms.value = ''
}
const phone = ref('')
const sms = ref("")

// 是否可以点击验证码
const disabled = ref(true)
// 微信的code
const wxCode = ref()
// 微信的个人信息
const wXuserInfo = ref()
// 控制是否可以授权登录
const sqLogin = ref(true)
// 授权登录
const autoLoginMore = () => {
		// 小程序的登录流程
		// 0. 获取用户的微信信息 
		uni.getUserProfile({
			desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
			success: (res) => {
				console.log(res)
				// 1. 获取得到 code 
				uni.login({
					success: ({
						code
					}) => {
						console.log(code) //token
						wxCode.value = code
						wXuserInfo.value = res.userInfo
						// 确认之后把手机钓起来
						openPhoneLogin()
						// uni.setStorageSync('code', code);
						// uni.setStorageSync("userInfo", res.userInfo)
						// store.changeUserInfo(res.userInfo)
					}
				})
			}
		})

}

// 手机号
const changePhone = (e) =>{
		console.log(e);
		console.log(phone.value);
		phone.value = e.detail.value
		if(reg.phone.test(phone.value)){
			console.log('scuess');
			disabled.value = false
		} else {
			console.log('打咩');
			wx.showToast({
			title: '手机号输入有误',
			icon: 'error',
			// duration: 2000
			})

		}
}
// 发送验证码
const sendCode = async () =>{
	let res = await sentYzm(phone.value)
	if(res.code != 200){
		wx.showToast({
		title: '服务器错误',
		icon: 'error',
		// duration: 2000
		})
	}

}
// 输入验证码
const changesms = (e) =>{
	if(reg.code.test(e.detail)){
		sms.value = e.detail
		sqLogin.value = false
	}
}
const getTokenFn = async () =>{
	let res = await getToken(phone)
	if(res.code != 200) return
	// 这里才保存用户信息
	uni.setStorageSync('code', wxCode.value);
	uni.setStorageSync("userInfo", wXuserInfo.value)
	uni.setStorageSync("token", res.token)
	store.changeUserInfo(wXuserInfo.value)
	// 关闭登录
	show.value = false
}
// 验证验证码和手机号
const YZYzmFn = async ()=>{
	let res = await YZYzm(phone.value,sms.value)
	if(res.code != 200){
		wx.showToast({
		title: '手机号或验证码输入有误',
		icon: 'error',
		})
		return
	}
	// 验证通过获取token
	getTokenFn()
}
// 暴露子组件的方法
defineExpose({
	openPhoneLogin,
	autoLoginMore
})
</script>

<style scoped>
.views{
	height: 30px;
}
	
.btns{
	width: 90%;
	margin: 0 5%;
}
</style>